<!--
 @description
 @fileName Detail.vue
 @author zengqiongying
 @created 2022/08/08 16:26:00
-->
<template>
  <div class="order-detail-page">
    <MineHeader id="oHeader" title="订单详情" arrow show-statusbar :bg-color="barBgColor" />
    <div class="order-detail-box">
      <div class="order-state">
        订单{{ getDictName(oData.state,'STATUS') }}
      </div>
      <div class="detail-main">
        <div class="s-group">
          <Cell label="顾客信息" is-column :right="false" :value="consumerInfo" />
        </div>
        <div class="s-group">
          <Cell label="收货地址" is-column :value="receiverInfo" :right="false">
            <div>{{ receiverInfo }}</div>
            <div class="mt10">{{ oData.address }}</div>
          </Cell>
        </div>
        <div class="s-group">
          <Cell label="家居顾问" :value="oData.homeConsultantName" :right="false" />
          <Cell label="销售日期" :value="oData.saleDate | filterTIme" :right="false" />
        </div>
        <div class="s-group">
          <Cell label="配送方式" :value="oData.deliveryMode==='02'?'配送':'自提'" :right="false" />
          <Cell label="预计配送日期" :value="oData.deliveryTime | filterTIme" :right="false" />
        </div>
        <div v-if="oData.skuList && oData.skuList.length>0" class="s-group o-skulist">
          <SkuItem v-for="(sku,i) in oData.skuList" :key="i" :sku="sku" />
        </div>
        <div class="s-group">
          <Cell label="商品小计" :value="`￥${productFee || 0}`" :right="false" />
          <Cell label="送装费" :value="`+ ￥${oData.deliveryFee || 0}`" :right="false" />
        </div>
        <div class="s-group">
          <Cell label="收款状态" :value=" getDictName(oData.paymentState,'PAYMENT_STATUS')" :right="false" />
          <Cell label="应收金额" :right="false" custom>
            <span class="red-color">￥{{ oData.shouldPaymentFee || 0 }}</span>
          </Cell>
          <Cell label="已收金额" :value="`￥${oData.paymentFee || 0}`" :right="false" />
          <Cell label="未清金额" :right="false" custom>
            <span :class="{'red-color':Number(oData.unPaymentFee || 0)>0}">￥{{ oData.unPaymentFee || 0 }}</span>
          </Cell>
        </div>

        <div class="s-group">
          <Cell label="退货金额" :value="`￥${oData.returnFee || 0}`" :right="false" />
        </div>

        <div class="s-group">
          <Cell label="订单备注" :value="oData.remark" :right="false" />
          <Cell label="零售单号" :value="oData.retailOrderCode" :right="false" />
          <Cell label="制单日期" :value="oData.createTime" :right="false" />
          <Cell label="经销商" :value="oData.disName" :right="false" />
          <Cell label="销售门店" :value="oData.saleStoreName" :right="false" />
          <Cell label="订单来源" :value="getDictName(oData.orderSource,'ORDER_SOURCE')" :right="false" />
          <Cell label="订单标识" :value="oData.isChange?'已变更':'未变更'" :right="false" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Cell from '@/views/commitOrder/components/Cell'
import SkuItem from './components/SkuItem'
import { parseTime } from '@/utils'
import { queryOrderDetail } from '@/apis/order'
import { getDictByType } from '@/apis/dataDict'
export default {
  name: 'OrderDetail',
  components: {
    Cell, SkuItem
  },
  filters: {
    filterTIme(val) {
      return parseTime(val, '{y}-{m}-{d} {h}:{i}:{s}')
    }
  },
  mixins: [],
  data() {
    return {
      isListen: false,
      orderId: this.$route.params.id,
      oData: '',
      barOpacity: 0,
      dictData: {}
    }
  },

  computed: {
    barBgColor() {
      if (this.barOpacity > 0) {
        return `rgba(255, 255, 255, ${this.barOpacity})`
      } else {
        return 'transparent'
      }
    },
    // 顾客信息
    consumerInfo() {
      if (!this.oData) return ''
      const { consumerName, consumerPhone, consumerPhoneBak } = this.oData
      const tmp = []
      if (consumerName) {
        tmp.push(consumerName)
      }
      if (consumerPhone) {
        tmp.push(consumerPhone)
      }
      if (consumerPhoneBak) {
        tmp.push(consumerPhoneBak)
      }
      return tmp.join(', ')
    },
    // 收货人
    receiverInfo() {
      const { consigneeName, consigneePhone, consigneePhoneBak } = this.oData
      const tmp = []
      if (consigneeName) {
        tmp.push(consigneeName)
      }
      if (consigneePhone) {
        tmp.push(consigneePhone)
      }
      if (consigneePhoneBak) {
        tmp.push(consigneePhoneBak)
      }
      return tmp.join(', ')
    },
    productFee() {
      const fee = Number(this.oData.shouldPaymentFee || 0) - Number(this.oData.deliveryFee || 0)
      return Math.floor(fee * 100) / 100
    }
  },

  async created() {
    this.addEventListener()
    await this.getDictList()
    this.getDetailData()
  },
  beforeDestroy() {
    this.removeEventListener()
  },
  activated() {
    this.addEventListener()
  },
  deactivated() {
    this.removeEventListener()
  },
  mounted() {},

  methods: {
    addEventListener() {
      if (this.isListen) {
        return
      }
      this.isListen = true
      window.addEventListener('scroll', this.ScrollPage, { passive: true })
    },
    removeEventListener() {
      if (!this.isListen) return
      this.isListen = false
      window.removeEventListener('scroll', this.ScrollPage, { passive: true })
    },
    ScrollPage(e) {
      const headerEl = document.querySelector(`#oHeader`)
      if (headerEl) {
        const top = headerEl.getBoundingClientRect().top
        if (top >= 0) {
          this.barOpacity = 0
          return
        }
        let barOpacity = 1 - (top + 44) / 44
        if (barOpacity > 1) barOpacity = 1
        this.barOpacity = barOpacity
      }
    },
    getDetailData() {
      queryOrderDetail(this.orderId).then(res => {
        this.oData = res.data || ''
      })
    },
    async getDictList() {
      const appCode = 'retail'
      const sourceList = await getDictByType({ appCode, dictTypeCode: 'ORDER_SOURCE' })
      const statusList = await getDictByType({ appCode, dictTypeCode: 'STATUS' })
      const paymentStateList = [
        { dictCode: '01', dictName: '未结清' },
        { dictCode: '02', dictName: '已结清' }
      ]
      this.dictData = {
        'ORDER_SOURCE': sourceList,
        'STATUS': statusList,
        'PAYMENT_STATUS': paymentStateList
      }
    },
    getDictName(val, dictTypeCode) {
      const data = this.dictData[dictTypeCode]
      if (data && data.length) {
        const obj = data.find(v => v.dictCode === val)
        return (obj && obj.dictName) || val
      }
      return val
    }
  }
}

</script>
<style lang='less' scoped>
.order-detail-box{
  padding: 16px 16px;
}
.order-detail-page{
  background:#F5F6F7 url(~@/assets/my/bg_order.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  box-sizing: border-box;
  .order-state{
    padding-top: 10px;
    padding-bottom: 16px;
    line-height: 33px;
    font-size: 24px;
    font-weight: bold;
    color: #EE671A;
  }

  .s-group{
    margin-bottom: 10px;
    padding: 10px 12px;
    background: #FFFFFF;
    border-radius: 12px;
    &.o-skulist{
      padding: 20px 12px;
    }
    /deep/ .mt10{
      margin-top: 10px;
    }
    .cell{
      min-height: 20px;
    }
  }
  .red-color{
    color: #FF634C;
  }
}
</style>
